<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>

<head></head>

<body>
  <script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>
  <script src="/js/jquery.json-1.3.min.js" type="text/javascript"></script>

    <div id="ggkfield">
    </div>

    <img id="gttload" src="/img/tiny_red.gif" style="position:absolute;top:108px;left:50px;"/>
    <div id="gttctr" style="font-size:xx-small;position:absolute;top:108px;left:50px;">10</div>

    <div id="ggknumbers">
        <img id="ggkn1" src="/img/tiny_red.gif" style="position:absolute;height:8px;width:8px"/>
        <img id="ggkn2" src="/img/tiny_red.gif" style="position:absolute;height:8px;width:8px"/>
        <img id="ggkn3" src="/img/tiny_red.gif" style="position:absolute;height:8px;width:8px"/>
        <img id="ggkn4" src="/img/tiny_red.gif" style="position:absolute;height:8px;width:8px"/>
        <img id="ggkn5" src="/img/tiny_red.gif" style="position:absolute;height:8px;width:8px"/>
        <img id="ggkn6" src="/img/tiny_red.gif" style="position:absolute;height:8px;width:8px"/>
        <img id="ggkn7" src="/img/tiny_red.gif" style="position:absolute;height:8px;width:8px"/>
        <img id="ggkn8" src="/img/tiny_red.gif" style="position:absolute;height:8px;width:8px"/>
        <img id="ggkn9" src="/img/tiny_red.gif" style="position:absolute;height:8px;width:8px"/>
    </div>

    <div id="gttfg" style="font-size:xx-small;position:absolute;top:150px;left:20px;"></div>


<script type="text/javascript">
  var fields = new Array(81);
  for(var f=0; f<81; f++) {
      fields[f] = ".";
  }
  var selectedField = 0;
  var selectedNum = 0;
  var ctr = 0;
  var tohandle = null;

  function initPositions(num) {
      switch(num) {
          case 1:
              return {position:"absolute", top:"120px", left:"40px"};
          case 2:
              return {position:"absolute", top:"120px", left:"50px"};
          case 3:
              return {position:"absolute", top:"120px", left:"60px"};
          case 4:
              return {position:"absolute", top:"130px", left:"40px"};
          case 5:
              return {position:"absolute", top:"130px", left:"50px"};
          case 6:
              return {position:"absolute", top:"130px", left:"60px"};
          case 7:
              return {position:"absolute", top:"140px", left:"40px"};
          case 8:
              return {position:"absolute", top:"140px", left:"50px"};
          case 9:
              return {position:"absolute", top:"140px", left:"60px"};
      }
  }

  function fieldPositions(index) {
      var x = (index-1) % 9;
      var y = (index-1-x) / 9;
      var top = y * 12;
      var left = x * 12;
      return {"position":"absolute", "top": top + "px", "left": left + "px"};
  }

  function initImages(num) {
      return "/img/" + num + ".gif";
  }

  function highImages(num) {
      return "/img/" + num + "r.gif";
  }

  function clickNum(num) {
      if(selectedField != 0) {
        if(tohandle != null) {
            window.clearTimeout(tohandle);
            tohandle = null;
        }
        $('#gttctr').html("");
        $('#gttload').show();
        var pos = fieldPositions(selectedField);
        selectedNum = num;
        $("#ggkn"+num).animate(pos, 1000, "swing", putNumBack);
        $.getJSON("/draw", {r:'001', f:selectedField, c:num}, onStateReturned);
      }
  }

  function putNumBack() {
      if(selectedNum > 0) {
          var pos = initPositions(selectedNum);
          $("#ggkn"+selectedNum).css("top", pos['top']);
          $("#ggkn"+selectedNum).css("left", pos['left']);
          $("#ggkn"+selectedNum).fadeIn();
      }
  }

  function selectField(num) {
      if(selectedField != 0) {
          var sf = selectedField;
          selectedField = 0;
          mouseOutField(sf);
      }
      var fieldid = "#gttf" + num;
      $(fieldid).css("background-color", "red");
      selectedField = num;
  }

  function mouseOverField(num) {
      if(num != selectedField) {
          var fieldid = "#gttf" + num;
          $(fieldid).css("background-color", "green");
      }
  }

  function mouseOutField(num) {
      if(num != selectedField) {
          var fieldid = "#gttf" + num;
          $(fieldid).css("background-color", "silver");
      }
  }

  function highlightNum(num) {
      var numid = "#ggkn" + num;
      var image = highImages(num);
      $(numid).attr("src", image);
  }

  function lowlightNum(num) {
      var numid = "#ggkn" + num;
      var image = initImages(num);
      $(numid).attr("src", image);
  }

  function refresh() {
    if(tohandle != null) {
	    window.clearTimeout(tohandle);
	    tohandle = null;
    }
    ctr=ctr-1;
    if(ctr >= 0) {
    	$('#gttctr').html(ctr);
    	tohandle = window.setTimeout("refresh()", 1000);
    }
    else {
        $('#gttctr').html("");
        $('#gttload').show();
        $.getJSON("/state", {r:'001'}, onStateReturned);
    }
  }

  function onStateReturned(state) {
      for(var i=0; i<81; i++) {
          var c = state.playingField.charAt(i);
          var f = fields[i];
          if(c != f) {
              var fieldid = "#gttf" + (i+1);
              $(fieldid).css("background-color", "yellow");
              if(f != ".") {
                var fid = "#ggkfc" + (i+1) + "-" + f;
                $(fid).fadeOut();
              }
              if(c != ".") {
                  var cid = "#ggkfc" + (i+1) + "-" + c;
                  $(cid).fadeIn();
              }
              fields[i] = c;
          }
          else {
              var fieldid = "#gttf" + (i+1);
              $(fieldid).css("background-color", "silver");
          }
      }

      if(selectedField != 0) {
          var sf = selectedField;
          selectedField = 0;
          mouseOutField(sf);
      }

      $('#gttfg').html('finished games: ' + state.gamesFinished)

      $('#gttload').hide();
      ctr = 10;
      $('#gttctr').html(ctr);

      if(selectedNum > 0) {
        $("#ggkn"+selectedNum).fadeOut();
        var pos = initPositions(selectedNum);
        $("#ggkn"+selectedNum).css("top", pos['top']);
        $("#ggkn"+selectedNum).css("left", pos['left']);
        $("#ggkn"+selectedNum).fadeIn();

      }

    tohandle = window.setTimeout("refresh()", 1000);
  }

  $(document).ready(function(){
      for(var y=0; y<9; y++) {
          for(var x=0; x<9; x++) {
              var t = (y*12);
              var l = (x*12);
              var i = (y*9)+x+1;
              $("#ggkfield").append("<div id=\"gttf" + i + "\" style=\"background-color:silver;width:10px;height:10px;position:absolute;\">");
          }
      }
      for(var i=1; i<=81;i++) {
          $("#gttf"+i).attr("onmouseover", "javascript:mouseOverField(" + i + ")");
          $("#gttf"+i).attr("onmouseout", "javascript:mouseOutField(" + i + ")");
          $("#gttf"+i).attr("onclick", "javascript:selectField(" + i + ")");
      }
      for(var y=0; y<9; y++){
          for(var x=0; x<9; x++) {
              for(var n=1; n<=9; n=n+1) {
                  var i = (y*9)+x+1;
                  var id = "ggkfc" + i + "-" + n;
                  $("#gttf"+i).append("<img id=\""+ id + "\" src=\"/img/"+n+".gif\" style=\"position:absolute;top:1px;left:1px;height:8px;width:8px\"/>");
                  $("#" + id).hide();
              }
          }
      }
      for(var y=0; y<9; y++) {
          for(var x=0; x<9; x++) {
              var index = (y*9)+x+1;
              var pos = fieldPositions(index);
              $("#gttf"+index).css(pos);
          }
      }
      for(var n=1; n<=9; n++) {
          var numid = "#ggkn" + n;
          var image = initImages(n);
          $(numid).attr("src", image);
          var position = initPositions(n);
          $(numid).css(position);
      }
      for(var n=1; n<=9; n++) {
          var numid = "#ggkn" + n;
          var mover = "javascript:highlightNum(" + n + ")";
          var mout = "javascript:lowlightNum(" + n + ")";
          var click = "javascript:clickNum(" + n + ")";
          $(numid).attr("onmouseover", mover);
          $(numid).attr("onmouseout", mout);
          $(numid).attr("onclick", click);
      }
    $("#gttload").hide();
    refresh();
  });
</script>

</body>

</html>
